import { useEffect, useState } from "react";

import {Switch, Tooltip} from "antd";
import {QuestionCircleOutlined} from '@ant-design/icons';

import styles from '../styles/module.module.css'
import { $ } from "@components/util";
const moduleClass = $(styles, "module", 'absolute');

const Module = (props) => {
    const defaultStyle = {
        top: 0,
        left: 0
    }
    const {title, style=defaultStyle, desc='' ,children} = props


  const [checked, setchecked] = useState(true)
  const onChange = (checked, event) => {
    setchecked(checked)
  };
  

  useEffect(() => {
    
  }, []);

  return (
    <>
      <div className={moduleClass} style={checked ? style : {...style,width: 'auto'}}>
        <div className={styles.titleBox}>
          <div onClick={() => setchecked(true)}>
            <span>{title}</span>
            <Tooltip title={desc ? desc : title}><QuestionCircleOutlined /></Tooltip>
          </div>
          {checked ? <Switch defaultChecked size="small" checked={checked} onChange={onChange}/> : null}
        </div>
        <div style={{display: checked ? 'block' : 'none'}}>
          {children}
        </div>
      </div>
    </>
  );
};

export default Module;
